/*------------------------------------*\
    #drawer
\*------------------------------------*/

@import '../../../sass/scss/core.scss';

$pl-drawer-resizer-height: 20px;

pl-drawer {
  display: flex;
  flex-direction: column;
  position: relative;
  position: sticky;
  top: auto;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 20;
  overflow: visible;
}

/**
 * 1) The drawer slides up from the bottom of the viewport when
 *    "show pattern info" is selected on the pattern detail screen.
 */
.pl-c-drawer {
  display: flex;
  flex-direction: column;
  font-family: $pl-font;
  background-color: $pl-color-gray-87;
  background-color: var(--theme-secondary, $pl-color-gray-87);
  color: $pl-color-gray-20;
  width: 100%;
  height: 100%;
  transform: translate3d(0, 0, 0);
  pointer-events: none;
  overflow: hidden;
  max-width: 100vw;

  @supports (padding: max(0px)) {
    padding-left: calc(env(safe-area-inset-left) / 2);
    padding-right: calc(env(safe-area-inset-right) / 2);
  }

  .pl-c-body--theme-sidebar & {
    @media all and (min-width: $pl-bp-med) {
      max-width: calc(100vw - #{$pl-sidebar-width});
    }
  }

  .pl-c-body--theme-light & {
    // Modal / Drawer inside a light theme
    background-color: $pl-color-white;
    color: $pl-color-gray-70;
  }

  /**
     * Active drawer
     */
  &.pl-is-active {
    pointer-events: auto;
  }
}

.pl-c-drawer__wrapper {
  transform: translate3d(0, 0, 0);
  will-change: height;
  overflow: hidden;
}

.pl-c-drawer__wrapper > * {
  height: 100%;
}

.pl-c-drawer__content {
  flex-grow: 1;
  display: flex;
  width: 100%;
  overflow: hidden; // needed for IE 11 so scrollbars show up
  max-height: calc(
    100% - 32px - 1.5rem
  ); // workaround to fix drawer content collapsing. @todo: remove once larger tabs refactor PR'd
}

.pl-c-drawer__toolbar {
  display: flex;
  flex-direction: column;
  flex-shrink: 0; // so that the resizer height doesn't change unexpectedly
}

.pl-c-drawer__content-wrapper {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  overflow: hidden; // needed for IE 11 so scrollbars show up

  @supports (padding: env(safe-area-inset-top)) {
    padding-right: calc(env(safe-area-inset-right) - 0.9rem);
  }
}

.pl-c-drawer__toolbar-controls {
  display: flex;
  flex-direction: row;
  align-self: flex-end;
  position: relative;
  z-index: 10;
  flex-shrink: 0; // fix for IE 11 squishing UI controls
}

/**
 * drawer close button
 * 1) Closes the drawer popup
 */
.pl-c-drawer__close-btn {
  @include linkStyle;
  margin: 0;
  padding: 0.2rem;
  -webkit-appearance: none;
  flex-shrink: 0; // needed for IE 11

  @media all and (max-width: $pl-bp-med - 1) {
    border-radius: 20rem;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
  }

  z-index: 2;
  opacity: 0.85;
  display: flex;
  justify-content: center;

  &:hover,
  &:focus {
    opacity: 1;
  }

  &:focus,
  &:active {
    opacity: 1;
  }
}

.pl-c-drawer__cover {
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  position: fixed;
  z-index: 20;
  cursor: move;
}

.pl-c-drawer__resizer {
  display: flex;
  position: relative;
  top: 0;
  left: 0;
  right: 0;
  align-items: center;
  justify-content: center;
  height: $pl-drawer-resizer-height;
  width: 100%;
  background-color: inherit;
  z-index: 2;
  cursor: ns-resize;
  border-bottom: 1.1px solid $pl-color-gray-20; // sub-pixel bug in Chrome. border disappears sometimes when set to 1px
  border-bottom-color: $pl-color-gray-20;
  border-bottom-color: var(--theme-border, $pl-color-gray-20);
  padding-top: 5px;
  padding-bottom: 5px;

  &::after {
    content: '';
    height: 100%;
    width: 100%;
    left: 0;
    opacity: 0;
    top: 0;
    position: absolute;
    pointer-events: none;
    display: block;
    background-color: currentColor;
    transition: 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  }

  &:hover::after {
    opacity: 0.1;
  }

  &:focus::after,
  &:active::after {
    opacity: 0.2;
  }
}

.pl-c-drawer__resizer-icon {
  width: 10px;
  height: 100%;
  fill: currentColor;
  z-index: 100;
  transform: scale(3, 1) rotate(90deg);
}

/**
 * Close button icon
 * 1) Displayed as an e
 */
.pl-c-drawer__close-btn-icon {
  width: 20px;
  height: 20px;
  color: currentColor;
  fill: currentColor;
  transition: fill $pl-animate-quick ease-out;
  flex-shrink: 0; // needed for IE 11
  align-self: center; // valign in IE 11
}
